<template>
	<div class="main-page">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>
		<!-- #endif -->

		<popups v-model="popupsSwitch" @tapPopup="handleNavbarList" :popData="navbarListData" :x="navbarListX"
			:y="navbarListY" placement="top-start" />

		<view class="index">
			<!-- topBar -->
			<u-navbar :background="navbar" :is-back="false"
				:class="headerFlag ? 'header' : 'header bg-none scroll-hide'">
				<div class="headerRow">
					<div class="backs">
						<u-icon @click="back()" name="arrow-left" class="icon-back"></u-icon>
						<u-icon name="list" @click="popupsSwitch = !popupsSwitch" class="icon-list"></u-icon>
					</div>
				</div>
			</u-navbar>
			<u-navbar :border-bottom="false" v-show="!headerFlag" class="header-only-back" :background="navbarOnlyBack"
				:is-back="false">
				<div>
					<div class="bg-back">
						<u-icon size="40" @click="back()" name="arrow-left" class="icon-back"></u-icon>
						<u-icon size="40" @click="popupsSwitch = !popupsSwitch" name="list" class="icon-list"></u-icon>
					</div>
				</div>
			</u-navbar>
		</view>

		<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
			<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page"
				:scroll-top="tabScrollTop">
				<view>
					<!-- 轮播图 -->

					<GoodsSwiper id="main1" :res="imgList" />


					<view class="card-box top-radius-0" id="main2">
						<view class="desc-bold -goods-msg">
							<view class="-goods-flex">
								<view class="desc-bold">
									xxx商品
								</view>
								<view class="favorite">
									<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
										:name="favorite ? 'heart-fill' : 'heart'">
									</u-icon>
									<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{
										favorite? "已收藏": "收藏"
									}}</view>
								</view>
							</view>
							<!-- 商品描述 -->
							<view class="-goods-desc">
								高速下驾驶更稳定/高端静谧车内空间
							</view>
						</view>
					</view>

					<view class="card-box">
						<view class="card-flex">
							<view class="card-title"> 促销 </view>
							<view class="card-content">
								<span>暂无促销信息</span>
							</view>
							<view class="card-bottom">
								<u-icon name="more-dot-fill"></u-icon>
							</view>
						</view>
					</view>

					<view class="card-box">
						<view class="card-flex" @click="shutMask()">
							<view class="card-title"> 已选 </view>
							<view class="card-content">
								<span>默认</span>
							</view>
							<view class="card-bottom">
								<u-icon name="more-dot-fill"></u-icon>
							</view>
						</view>
						<view class="card-flex">
							<view class="card-title">地址</view>
							<view class="card-content">
								<span>xxx楼xxx号</span>
							</view>
							<view class="card-bottom">
								<u-icon name="more-dot-fill"></u-icon>
							</view>
						</view>
						<view class="card-flex">
							<view class="card-title">电话</view>
							<view class="card-content">
								<span>13000000000</span>
							</view>
							<view class="card-bottom">
								<u-icon name="more-dot-fill"></u-icon>
							</view>
						</view>
					</view>

					<!-- 评价 -->
					<Evaluation id="main5" />

					<!-- 店铺推荐 -->
					<storeLayout id="main7" />

					<!-- 宝贝详情 -->
					<GoodsIntro id="main9" />

					<!-- 宝贝推荐 -->
					<GoodsRecommend id="main11" :res="likeGoodsList" />
				</view>
			</scroll-view>


			<view class="page-bottom mp-iphonex-bottom" id="pageBottom">
				<view class="icon-btn">
					<view class="icon-btn-item" @click="navigateToStore()">
						<u-icon size="34" class="red" name="home-fill"></u-icon>
						<view class="red icon-btn-name">店铺</view>
					</view>
					<view class="icon-btn-item">
						<u-icon size="34" name="kefu-ermai"></u-icon>
						<view class="icon-btn-name">客服</view>
					</view>
					<view class="icon-btn-item" @click="reluchToCart()">
						<u-icon size="34" name="storeping-cart"></u-icon>
						<view class="icon-btn-name">购物车</view>
					</view>
				</view>
				<!-- 正常结算页面 -->
				<view class="detail-btn">
					<view class="to-store-car to-store-btn" @click="shutMask()">
						加入购物车</view>
					<view class="to-buy to-store-btn" @click="shutMask()">立即购买</view>
				</view>
			</view>
			<!-- 规格-模态层弹窗 -->
			<view class="spec">

				<!-- 商品规格  商品详情，以及默认参与活动的id-->
				<popupGoods :buyMask="buyMask" @closeBuy="closeBuy" />
				
			</view>
		</view>
	</div>
</template>

<script>
	import GoodsIntro from "./product/goods/-goods-intro"; //商品介绍组件
	import GoodsRecommend from "./product/goods/-goods-recommend"; //宝贝推荐
	import storeLayout from "./product/shop/-shop"; //店铺组件
	import Evaluation from "./product/evaluation/-evaluation"; //评价组件
	import GoodsSwiper from "./product/goods/-goods-swiper"; //轮播图组件
	import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
	import popups from "@/components/popups/popups"; //气泡框
	import setup from "./product/popup/popup";

	export default {
		components: {
			popups,
			GoodsIntro,
			GoodsRecommend,
			storeLayout,
			Evaluation,
			GoodsSwiper,
			popupGoods,
		},
		data() {
			return {
				imgList: [
					'https://l.b2b168.com/2017/07/28/13/201707281344182879554.jpg'
				], //轮播图数据
				setup,
				navbarListX: 100, //导航栏列表栏x轴
				navbarListY: 140, //导航栏列表栏y轴
				navbarListData: [
					//导航栏列表栏数据
					{
						title: "首页",
						icon: "home-fill",
						___type: "other",
					},
					{
						title: "购物车",
						icon: "bag-fill",
						___type: "other",
					},
					{
						title: "搜索",
						icon: "search",
						___type: "category",
					},
					{
						title: "个人中心",
						icon: "account-fill",
						___type: "other",
					},
				],
				popupsSwitch: false, //导航栏列表栏开关
				navbarOnlyBack: {
					background: "transparent",
				},
				navbar: {
					background: "#fff",
				},
				productRefHeight: "",
				header: {
					top: 0,
					height: 50,
				},
				headerFlag: false, //顶部导航显示与否
				tabScrollTop: null,
				favorite: true, //收藏与否flag
				buyMask: false, //添加购物车直接购买，查看已选 弹窗
				likeGoodsList: [], //相似商品列表
			};
		},

		mounted() {
			this.InitialHeight()
		},

		methods: {
			/**
			 * 导航栏列表栏
			 */
			handleNavbarList(val) {
				console.log('跳转')
			},

			/**
			 * 返回
			 */
			back() {
				uni.navigateBack();
			},

			closeBuy() {
				this.buyMask = false;
			},

			/**
			 * 跳转到店铺页面
			 */
			navigateToStore() {
				uni.navigateTo({
					url: `/pages/product/shopPage`,
				});
			},

			/**
			 * 跳转购物车
			 */
			reluchToCart() {
				uni.switchTab({
					url: "/pages/tabbar/cart/cartList",
				});
			},

			shutMask() {
				this.buyMask = true;
			},

			InitialHeight() {
				const {
					windowHeight
				} = uni.getSystemInfoSync();
				let bottomHeight = 0;
				let topHeight = 0;
				uni.getSystemInfo({
					success: function(res) {
						// res - 各种参数
						let bottom = uni.createSelectorQuery().select(".page-bottom");
						bottom
							.boundingClientRect(function(data) {
								if (data && data.height) {
									//data - 各种参数
									bottomHeight = data.height; // 获取元素宽度
								}
							})
							.exec();
						let top = uni.createSelectorQuery().select(".header");
						top
							.boundingClientRect(function(data) {
								if (data && data.height) {
									//data - 各种参数
									topHeight = data.height; // 获取元素宽度
								}
							})
							.exec();
					},
				});

				this.productRefHeight = windowHeight - bottomHeight + "px";
			}
		},
	};
</script>

<style lang="scss" scoped>
	// #ifdef MP-WEIXIN
	@import "./product/mp-goods.scss";
	// #endif

	@import "./product/style.scss";
	@import "./product/product.scss";
</style>
